<template>
  <div class="score-container">
    <div v-if="isSubmit&&evalutionData.length" style="height: 520px;">
      <div class="mb-20 flex-center">
        已完成评价
      </div>
      <a-button class="score-foot btn" type="primary" @click="isSubmit = false">重新评价</a-button>
    </div>
    <div v-else-if="!isSubmit&&evalutionData.length">
      <div class="content">
        <div v-for="(item, index) in evalutionData" :key="index" class="score-item">
          <div class="score-title">{{ index + 1 }}、{{ item.desc }}</div>
          <a-rate v-model:value="scores[index]" allow-half />
          <span class="score-value">{{ scores[index] }} 分</span>
        </div>
      </div>
      <div class="score-foot">
        <a-button class="btn" type="primary" :loading="loading" @click="submitScore">提交</a-button>
      </div>
    </div>
    <div v-else class="flex-center">暂未设置评价表</div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue';
import { getEvaluation, submitEvaluation } from '../apis/api/home'
import { EvaluationRequest, Evaluation, } from '../apis/types/home'

let evalutionData = ref<Evaluation[]>([])
const route = useRoute()
let loading = ref(false)
const isSubmit = ref(false)
console.log(route.query, '路由参数');

// 初始化每项的分数
const scores = ref(new Array(evalutionData.value.length).fill(0));
async function getEvaluationFn() {
  const params: EvaluationRequest = {
    meetingId: route.query.meeting_id // 面试ID
  };
  await getEvaluation(params).then((res: any) => {
    evalutionData.value = JSON.parse(res.data.data) ||[]
  });
}
const submitScore = () => {
  loading.value = true;
  const score = JSON.parse(JSON.stringify(evalutionData.value));
  score.forEach((item, index) => {
    item.score = scores.value[index] || 0;
  });
  const params = {
    evaluation: JSON.stringify({
      score: score,
    }),
    interviewId: route.query.interviewId,
  };
  submitEvaluation(params).then((res: any) => {
    console.log(res, '提交分数');
    if (res.data.code === 200) {
      loading.value = false
      isSubmit.value = true
      message.success('提交成功')
    } else {
      loading.value = false
      message.error('提交失败')
    }
  }
  ).catch((error: any) => {
    loading.value = false;
    console.error(error);
    message.error('提交失败')
  });


}

onMounted(() => {
  getEvaluationFn()
})

</script>

<style scoped>
.score-container {
  padding: 20px;
  overflow: hidden;
  position: relative;

  .content {
    height: 520px;

    .score-item {
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 16px;

      .score-title {
        min-width: 80px;
        color: #fff;
        font-size: 14px;
      }

      .score-value {
        margin-left: 8px;
        color: #fff;
      }
    }
  }


}

.score-foot {
  position: absolute;
  bottom: 20px;
  right: 20px;

}

.btn {
  width: 300px;
}

:deep(.ant-rate-star:not(:last-child)) {
  margin-right: 8px;
}
</style>